import React, { useState, useEffect } from 'react';
import { Menu } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { history } from 'umi';
import { IProps } from './type';

const LeftNav: React.FC = (props: IProps) => {
  const [openKey, setOpenKey] = useState<string[]>(['sub1']);

  // 点击菜单切换路由和页面
  const handleClick = (params: any): void => {
    let pathName = params.keyPath[1];
    history.push(pathName);
  };

  // 点击二级菜单，将最近一次点击的菜单赋值给开启的菜单
  const onOpenChange = (keys: string[]): void => {
    setOpenKey([keys[keys.length - 1]]);
  };
  const { SubMenu } = Menu;
  return (
    <Menu
      onClick={handleClick}
      onOpenChange={onOpenChange}
      style={{ width: 256, minWidth: 256, height: '100%' }}
      defaultSelectedKeys={['1']}
      openKeys={openKey}
      mode="inline"
    >
      <SubMenu key="sub1" icon={<AppstoreOutlined />} title="菜单1">
        <Menu.Item key="1">Option 1</Menu.Item>
      </SubMenu>
      <SubMenu key="sub2" icon={<MailOutlined />} title="菜单2">
        <Menu.Item key="2">Option 2</Menu.Item>
      </SubMenu>
      <SubMenu key="sub3" icon={<SettingOutlined />} title="菜单3">
        <Menu.Item key="3">Option 3</Menu.Item>
      </SubMenu>
    </Menu>
  );
}

export default LeftNav
